<template>
  <div class="data-card-container">
    <div class="data-card" v-for="(card, index) in dataCards" :key="index">
      <div class="card-title">{{ card.title }}</div>
      <div class="card-value" :style="{ color: card.color }">
        {{ card.value }}
      </div>
      <div class="card-comparison">
        <div>
          <span>同比昨天</span>
          <span
            class="icon"
            :style="{ color: card.trend === 'up' ? 'green' : 'red' }"
            >{{ card.trend === "up" ? "▲" : "▼" }}</span
          >
          <span>{{ card.delta }}</span>
        </div>
        <div>
          <span class="zuo-data">
            <span>昨日</span> <span>{{ card.yesterday }}</span></span
          >
        </div>
      </div>
      <div
        class="line-chart-ok"
        :id="`line-chart-ok-${index}`"
        style="width: 100%; height: 78px"
      ></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue"
import * as echarts from "echarts"

const dataCards = [
  {
    title: "转化率",
    value: 1210,
    color: "#262626",
    trend: "up",
    delta: 294,
    yesterday: 906,
  },
  {
    title: "转发",
    value: 418,
    color: "#407DF8",
    trend: "down",
    delta: 102,
    yesterday: 520,
  },
  {
    title: "平均观看时长",
    value: 4418,
    color: "#EFB918",
    trend: "up",
    delta: 294,
    yesterday: 920,
  },
  {
    title: "观看完整度",
    value: 418,
    color: "#A43AFF",
    trend: "down",
    delta: 102,
    yesterday: 520,
  },
]

// 用于存储防抖定时器
let resizeTimer

onMounted(() => {
  const myChart = echarts.init(document.getElementById("line-chart-ok-0"))
  const myChart1 = echarts.init(document.getElementById("line-chart-ok-1"))
  const myChart2 = echarts.init(document.getElementById("line-chart-ok-2"))
  const myChart3 = echarts.init(document.getElementById("line-chart-ok-3"))

  const option = {
    animation: true,
    animationDuration: 1000, // 动画持续时间（毫秒）
    animationEasing: "cubicOut", // 动画缓动效果
    grid: {
      left: 0,
      right: 0,
      bottom: 0,
      top: 0,
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["00:00", "06:00", "12:00", "18:00", "24:00"],
      axisLine: {
        show: true, // 显示x轴轴线
        lineStyle: {
          color: "rgba(0,0,0,0.15)",
          width: 1,
        },
      },
      axisTick: {
        show: true, // 显示刻度线
        length: 4, // 刻度线长度
        lineStyle: {
          color: "rgba(0,0,0,0.15)",
        },
        alignWithLabel: true, // 刻度线与标签对齐
      },
      axisLabel: {
        color: "#666",
        fontSize: 12,

        // 微调标签文本
        formatter: function (value, index) {
          console.log(value, index, "value, index")
          if (index === 0) return "         " + value
          if (index === 4) return value + "         "
          return value
        },
        // // 微调标签位置
        // offset: function (index) {
        //   console.log(index, "index")
        //   if (index === 0) return [-5, 0]
        //   if (index === 4) return [5, 0]
        //   return [0, 0]
        // },
      },
    },
    yAxis: {
      type: "value",
      axisLine: {
        show: false,
      },
      axisTick: {
        show: true,
        length: 4,
        lineStyle: {
          color: "#999",
        },
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
    },
    series: [
      {
        type: "line",
        data: [10, 8, 7, 12, 15], // 示例数据，可按需替换
        lineStyle: {
          color: "#E972A4",
          width: 2,
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(233, 114, 164, 0.2)" },
            { offset: 1, color: "rgba(233, 114, 164, 0)" },
          ]),
        },
        symbol: "none",
      },
    ],
  }

  myChart.setOption(option)
  myChart1.setOption(option)
  myChart2.setOption(option)
  myChart3.setOption(option)

  const resizeHandler = () => {
    // 清除之前的定时器
    if (resizeTimer) {
      clearTimeout(resizeTimer)
    }
    // 设置新的定时器
    resizeTimer = setTimeout(() => {
      myChart.resize()
      myChart1.resize()
      myChart2.resize()
      myChart3.resize()
    }, 500)
  }
  window.addEventListener("resize", resizeHandler)

  onUnmounted(() => {
    window.removeEventListener("resize", resizeHandler)
    myChart.dispose()
    myChart1.dispose()
    myChart2.dispose()
    myChart3.dispose()
    // 清除可能存在的定时器
    if (resizeTimer) {
      clearTimeout(resizeTimer)
    }
  })
})
</script>

<style scoped>
.data-card-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.data-card {
  height: 264px;
  box-shadow: 0px 2px 8px 0px rgba(156, 147, 155, 0.18);
  border-radius: 18px;
  padding: 20px 24px;
  width: calc((100% / 4) - 16px);
  background: #ffffff;
}

.card-title {
  height: 24px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 24px;
  text-align: left;
  font-style: normal;
}

.card-value {
  height: 30px;
  font-family: AlibabaSans102Dec10, AlibabaSans102Dec10;
  font-weight: bold;
  font-size: 30px;
  color: #262626;
  line-height: 30px;
  text-align: left;
  font-style: normal;
  margin-top: 24px;
}

.card-comparison {
  height: 20px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
  line-height: 20px;
  text-align: left;
  font-style: normal;
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
}
.icon {
  margin: 0 4px 0 8px;
}
.card-chart {
  margin-top: 8px;
}
.zuo-data span:last-child {
  height: 18px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #000000;
  line-height: 18px;
  text-align: right;
  font-style: normal;
  margin-left: 10px;
}
.line-chart-ok {
  margin-top: 40px;
}
</style>
